<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="Adobe RoboHelp - www.adobe.com">
<title>Creating a Date Selection widget</title>
<link rel="stylesheet" href="userhelp_ns.css"><script type="text/javascript" language="JavaScript" title="WebHelpSplitCss">
<!--
if (navigator.appName !="Netscape")
{   document.write("<link rel='stylesheet' href='userhelp.css'>");}
//-->
</script>
<style type="text/css">
<!--
img_whs1 { border:none; width:371px; height:279px; float:none; border-style:none; }
img_whs2 { border:none; width:461px; height:295px; float:none; border-style:none; }
img_whs3 { border:none; width:370px; height:359px; float:none; border-style:none; }
table.whs4 { x-cell-content-align:top; border-spacing:0px; }
tr.whs5 { x-cell-content-align:top; }
td.whs6 { padding-right:10px; padding-left:10px; border-left-style:Solid; border-left-color:#000000; border-top-color:#000000; border-top-style:Solid; border-right-style:Solid; border-right-color:#000000; border-bottom-color:#000000; border-bottom-style:Solid; border-right-width:1px; border-left-width:1px; border-top-width:1px; border-bottom-width:1px; background-color:#e7e7e7; }
td.whs7 { padding-right:10px; padding-left:10px; border-top-color:#000000; border-top-style:Solid; border-right-style:Solid; border-right-color:#000000; border-bottom-color:#000000; border-bottom-style:Solid; border-right-width:1px; border-top-width:1px; border-bottom-width:1px; background-color:#e7e7e7; }
p.whs8 { font-weight:bold; }
td.whs9 { padding-right:10px; padding-left:10px; border-top-color:#000000; border-top-style:Solid; border-right-style:Solid; border-right-color:#000000; border-bottom-color:#000000; border-bottom-style:Solid; border-top-width:1px; border-bottom-width:1px; border-right-width:1px; background-color:#e7e7e7; }
td.whs10 { padding-right:10px; padding-left:10px; border-left-style:Solid; border-left-color:#000000; border-left-width:1px; border-right-style:Solid; border-right-color:#000000; border-right-width:1px; border-bottom-width:1px; border-bottom-color:#000000; border-bottom-style:Solid; }
td.whs11 { padding-right:10px; padding-left:10px; border-right-style:Solid; border-right-color:#000000; border-right-width:1px; border-bottom-width:1px; border-bottom-color:#000000; border-bottom-style:Solid; }
td.whs12 { border-left-width:1px; border-left-color:#000000; border-left-style:Solid; border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; padding-right:10px; padding-left:10px; }
td.whs13 { border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; padding-right:10px; padding-left:10px; }
td.whs14 { padding-right:10px; padding-left:10px; border-left-width:1px; border-left-color:#000000; border-left-style:Solid; border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; }
td.whs15 { padding-right:10px; padding-left:10px; border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; }
ul.whs16 { list-style:disc; }
p.whs17 { font-weight:normal; }
-->
</style><script type="text/javascript" language="JavaScript" title="WebHelpInlineScript">
<!--
function reDo() {
  if (innerWidth != origWidth || innerHeight != origHeight)
     location.reload();
}
if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) {
	origWidth = innerWidth;
	origHeight = innerHeight;
	onresize = reDo;
}
onerror = null; 
//-->
</script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute; left:0px; top:0px; z-index:4; visibility:hidden; }
-->
</style><script type="text/javascript" language="javascript1.2" src="whmsg.js"></script>
<script type="text/javascript" language="javascript" src="whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="whtopic.js"></script>
</head>
<body><script type="text/javascript" language="javascript1.2">
<!--
if (window.gbWhTopic)
{
	if (window.addTocInfo)
	{
	addTocInfo("Creating and modifying documents and dashboards\nProviding Flash-based analysis and interactivity: Widgets\nCreating a Date Selection widget\nCreating a Date Selection widget");
addButton("show",BTN_TEXT,"Show","","","","",0,0,"","","");

	}
	if (window.writeBtnStyle)
		writeBtnStyle();

	if (window.writeIntopicBar)
		writeIntopicBar(1);

	if(1)
	{
	
	}

	if (window.setRelStartPage)
	{
	setRelStartPage("MicroStrategy_Web_Help.htm");

		autoSync(1);
		sendSyncInfo();
		sendAveInfoOut();
	}
}
else
	if (window.gbIE4)
		document.location.reload();

//-->
</script>
<h1>Creating a Date Selection widget</h1>
<p>A Date Selection widget is a calendar selector that allows you to select 
 which dates you want to see data about in a document or dashboard. You 
 are able to see all of the dates of each month in the widget, which allows 
 you to be able to select dates more easily. </p>
<p>For example, the Date Selection widget is useful if you are working 
 with a dashboard that displays data from Q4 2007 and you want to view 
 data from a month before that. You can select the date you want to see 
 and the data for that date will display on the dashboard, as shown below:</p>
<p><img src="images/widget_date_selection.gif" x-maintain-ratio="TRUE" width="371px" height="279px" border="0" class="img_whs1"></p>
<p>In non-Flash modes in MicroStrategy Web, a Date Selection widget can 
 display as a Grid/Graph (if it was created as a widget) or as a standard 
 selector such as a listbox or button bar (if it was created as a selector). 
 </p>
<p>The same dashboard is shown in Interactive Mode in MicroStrategy Web. 
 The Date Selection widget was created using a widget, so the selector 
 is now displayed as a Grid/Graph. (Widgets are created with Grid/Graphs; 
 for general information on widgets, see 
<a href="Widgets.htm">Providing 
 Flash-based analysis and interactivity: Widgets</a>). Notice the scroll 
 bar at the left: all the dates are not shown in this sample, because the 
 list is too long. Date even further down the list do not appear in the 
 same screen as the graph, which is why the Date Selection widget is so 
 useful. </p>
<p><img src="images/widget_date_GG.gif" x-maintain-ratio="TRUE" width="461px" height="295px" border="0" class="img_whs2"></p>
<p>In non-Flash modes, the widgets can instead be hidden or displayed as 
 an empty Grid/Graph placeholder. For examples, see 
<a href="Widget_non_Flash.htm">Defining 
 how a widget is rendered in non-Flash modes</a>. </p>
<p>If the Date Selection widget was created as a selector rather than as 
 a widget, in Interactive Mode, the dashboard looks like the sample shown 
 below. You can set the style of the selector, which in this example is 
 left as the default Listbox. Again, all the dates are not shown, because 
 the list is so long. The scrollbar allows you to view and select dates 
 further down the list. </p>
<p><img src="images/widget_date_selector.gif" x-maintain-ratio="TRUE" width="370px" height="359px" border="0" class="img_whs3"></p>
<p>These examples target a Grid/Graph, but a panel stack can also be the 
 target of a Date Selection widget. However, a Date Selection widget created 
 as a widget cannot switch panels on a panel stack. </p>
<p>The table below summarizes the differences between a Date Selection 
 widget created as a widget and as a selector.</p>
<table x-use-null-cells cellspacing="0" class="whs4">
<script language='JavaScript'><!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) == 4)) document.write("</table><table x-use-null-cells cellspacing='0' border='1' bordercolor='black' bordercolorlight='black' bordercolordark='black'>");
//--></script>
<col>
<col>
<col>


<tr valign="top" class="whs5">
<td bgcolor="#E7E7E7" class="whs6">
<p>&nbsp;</td>
<td bgcolor="#E7E7E7" class="whs7">
<p class="whs8">Widget</td>
<td bgcolor="#E7E7E7" class="whs9">
<p class="whs8">Selector</td></tr>

<tr valign="top" class="whs5">
<td class="whs10">
<p>Display in Flash Mode</td>
<td class="whs11">
<p>Date Selection widget</td>
<td class="whs11">
<p>Date Selection widget</td></tr>

<tr valign="top" class="whs5">
<td class="whs12">
<p>Display in non-Flash modes</td>
<td class="whs13">
<p>Can be any of the following:</p>
<ul>
<li class=p-TopicTextBulleted><p class=TopicTextBulleted>Grid/Graph 
 used as a selector</p></li>
	
<li class=p-TopicTextBulleted><p class=TopicTextBulleted>Empty Grid/Graph 
 placeholder</p></li>
	
<li class=p-TopicTextBulleted><p class=TopicTextBulleted>Hidden</p></li>
</ul>
<p><span style="font-weight: bold;"><B>Note</B></span>: A Date Selection widget 
 created as a widget can be displayed as a widget using Flash in DHTML 
 interactive documents. </td>
<td class="whs13">
<p>Selector displayed in the chosen DHTML style</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs10">
<p>Target panel stacks and Grid/Graphs</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Yes</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Yes</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs14">
<p>Multiple selections</td>
<td colspan="1" rowspan="1" class="whs15">
<p>No</td>
<td colspan="1" rowspan="1" class="whs15">
<p>Yes</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs14">
<p>Target of another selector</td>
<td colspan="1" rowspan="1" class="whs15">
<p>Yes</td>
<td colspan="1" rowspan="1" class="whs15">
<p>Only if the selector is on a panel stack (see 
<a href="Allowing_a_selector_to_be_updated_by_other_selectors.htm">Allowing 
 a selector to be updated by other selectors</a>)</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs10">
<p>Method of creating</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Create a widget</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Create a selector</td></tr>
<script language='JavaScript'><!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) == 4)) document.write("</table></table><table>");
//--></script>
</table>
<p>For instructions to create a Date Selection widget as a selector, see 
 
<a href="Creating_a_Date_Selection_widget_as_a_selector.htm">Creating 
 a Date Selection widget as a selector</a>.</p>
<p class="whs8">&nbsp;</p>
<p class="whs8">Related topics</p>
<ul type="disc" class="whs16">
	
<li class=p><p class="whs17">
<a href="Formatting_the_Date_Selection_widget.htm">Formatting 
 a Date Selection widget</a></p></li>
</ul>
<script type="text/javascript" language="javascript1.2">
<!--
highlightSearch();
if (window.writeIntopicBar)
	writeIntopicBar(0);
if(0)
{

}
//-->
</script>
</body>
</html>
